<template>
	<view class="msg-box" >
		<view class="curd-head">
			<view class="curd-title">
				<view>{{itemDetail.reserveOrderCode}}</view>
				<view >
					{{$utils.eliminate(itemDetail.carLicense)}}
				</view>
			</view>
			<view class="statusType">{{itemDetail.reserveStateName}}</view>
		</view>
		<view class="order-details" @click="toDetails">
			<view class="order-item" v-for="(item,index) in orderitem" :key="index">
				<view>{{item.label}}</view>
				<view>{{$utils.eliminate(itemDetail[item.model]) }}</view>
			</view>
		</view>		
		<view class="btn" >
			<view>
				服务顾问：
				<view class="adviser-name">{{$utils.eliminate(itemDetail.empName)}}</view>
			</view>
			<u-button type="primary" size="medium" v-if="statusCode === '1'" plain @click="Acceptance">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			itemDetail:{type:Object,default:()=>{}},
			statusCode:{type:String,default:''}
		},
		computed:{
			orderitem(){
				switch(this.statusCode){
					case '1':
						return [
							{
								label:'客户姓名',
								model:'custName'
							},{
								label:'电话号码',
								model:'reserveTel'
							},{
								label:'下单时间',
								model:'createdDate'
							},{
								label:'预约时间',
								model:'appointDate'
							}
						]
						break;
					case '2':
					case '3':
					case '4':
						return [
							{
								label:'车牌号',
								model:'carLicense'
							},{
								label:'车系',
								model:'carSeries'
							},{
								label:'时间',
								model:'createdDate'
							},
						]
						break;
				}
			}
		},
		data(){
			return{				
				status:[
					{
						label:'客户投诉',
					},{
						label:'客户咨询'
					}					
				]
			}
		},
		methods:{
			toDetails(){
				const url = '/pages/views/bookingManagement/bookingdetail'
				const params = {
					reserveOrderId: this.itemDetail.reserveOrderId,
					statusCode:this.statusCode
				}
				this.$navTo.togo(url,params)
			},
			makeCall(){
				uni.makePhoneCall({
				    phoneNumber: this.itemDetail.tel 
				});
			},
			Acceptance(){
				this.$emit('Acceptance',this.itemDetail)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box{
		width: 100%;
		height: 460upx;
		background-color: #fff;
		padding: 24upx;
		.curd-head{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.curd-title{
				:first-child{
					font-size: 28upx;
				}
				:nth-child(2){
					margin-top: 8upx;
					font-size: 34upx;
					font-weight: 600;
				}
			}
			.statusType{
				font-size: 24upx;
				color: rgb(246,71,47);
			}
		}
		.order-details{
			width: 100%;
			height: 240upx;
			background: #F9FAFE;
			padding: 12upx 24upx 24upx 24upx;	
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
			.order-item{
				width:50%;
				margin-top: 12upx;
				:first-child{
					color: #969696;
				}
				:nth-child(2){
					margin-top:  12upx;
					color: #333333;
				}
			}
		}
		.btn{
			width: 100%;
			// background-color: #ff0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 12upx;
			:first-child{
				display: flex;
				flex-direction: row;
				.adviser-name{
					color: $bg-color;
				}
			}
		}
	}
</style>
